<template>
    <div class="addBanner">
        <div>
            <el-input v-model="alt" placeholder="提示信息" />
            <el-input v-model="link" placeholder="跳转链接" />
        </div>
        <div>
            <input ref="bannerImg" type="file" @change="selectImg" class="changefile">

            <!-- <el-input v-model="img" hidden placeholder="图片链接" />
        <el-image :src="img"/> -->
            <el-button type="primary" @click="addBannerFn">添加</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { addBanner } from '@/apis/banner';
import { useRouter } from 'vue-router';
const alt = ref<string>('')
const link = ref<string>('')
const img = ref<string>('')

const bannerImg = ref()
const selectImg = () => {
    //获取文件信息
    const file = bannerImg.value.files[0]
    console.log(file);
    //读取文件信息
    const reader = new FileReader()
    //文件转base64
    reader.readAsDataURL(file)
    reader.onload = function () {
        //this.result 就是结果
        img.value = this.result?.toString()!
    }
}
const router = useRouter()
const addBannerFn = () => {
    addBanner({
        img: img.value,
        alt: alt.value,
        link: link.value
    }).then(() => {
        router.back()
    })
}
</script>

<style>
.addBanner{
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.el-input {
    margin-bottom: 10px;
    margin-right: 10px;
    height: 50px;
    width: 400px;
}
.changefile{
    width: 300px;
    height: 24px;
    margin-right: 10px;
    color: red;
}
</style>